<template>
<div class="about">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="字典名称">
        <el-input v-model="formInline.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="状态">
            <el-select
                v-model="formInline.state"
                placeholder="Activity zone"
                style="width: 190px;"
                clearable
            >
                <el-option label="正常" value="nomal" />
                <el-option label="停用" value="stop" />
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
        <el-date-picker
            v-model="formInline.date"
            type="date"
            placeholder="Pick a date"
            clearable
        />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
    </el-form>
    <div class="mb20">
        <el-button @click="onAdd" type="primary" icon="Plus" plain>新增</el-button>
        <el-button type="danger" icon="Delete" plain>删除</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="id" label="字典编号" width="150" />
        <el-table-column prop="name" label="字典名称" width="120" />
        <el-table-column prop="name" label="状态" width="120">
            <template #default="scope">
                {{ scope.row.state==1?'可用':'禁用' }}
           </template>
        </el-table-column>
        <el-table-column prop="mark" label="备注" width="120" />
        <el-table-column prop="date" label="创建时间" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
                <el-button link type="primary" @click="onDel(scope.row)" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

<!-- 添加，编辑弹框 -->
<el-dialog
    v-model="showPop"
    :title="isEdit?'编辑':'添加'"
  >
    <DicAddCom v-if="showPop" @onCancel="onCancel" :dicid="dicid" :isEdit="isEdit"  />
  </el-dialog>
</template>
<script setup>
import { reactive,ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DicAddCom from './DicAddCom.vue'


const formInline = reactive({
    name: '',
    state: '',
    date: '',
})

// 删除
const onDel = row=>{
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
        ElMessage({
        message: '删除成功！',
        type: 'success',
      })
    })
    .catch(() => {})
}
// 弹框
const showPop = ref(false);
// 默认添加
const isEdit = ref(false);
const dicid = ref(0);
// 添加
const onAdd = row=>{
    // 展示弹框
    showPop.value = true;
    isEdit.value = false;
}
// 编辑
const onEdit = row=>{
    // console.log('row',row,row.id);
    // 展示弹框
    showPop.value = true;
    isEdit.value = true;
    // 更新id
    dicid.value = row.id;
}
// 弹框关闭
const onCancel = ()=>{
    // 展示弹框
    showPop.value = false;
}



const onSubmit = () => {
  console.log('submit!')
}
const tableData = ref([
{
    id:1,
    name: '颜色',
    state: 1,//1可用，0禁用
    mark: 'Los Angeles',
    date: '2016-05-03',
  },
  {
    id:2,
    name: '性别',
    state: 0,//1可用，0禁用
    mark: 'Los Angeles',
    date: '2016-05-03',
  },
  {
    id:3,
    name: '车牌',
    state: 1,//1可用，0禁用
    mark: 'Los Angeles',
    date: '2016-05-03',
  },
])
</script>
  <style scoped>
  </style>
  